<template>
  <div>
    <area-picker-multi
      v-if="record.options.multiple"
      :level="3"
      :default-value="value"
      :disabled="record.options.disabled"
      :clearable="record.options.clearable"
      @change="onChange"
    />
    <area-picker
      v-else
      :level="3"
      :default-value="value"
      :disabled="record.options.disabled"
      :clearable="record.options.clearable"
      @change="onChange"
    />
  </div>
</template>
<script>
import { AreaPicker, AreaPickerMulti } from "xqjr-plugin-common";
export default {
  name: "AreaSelector",
  components: {
    AreaPicker,
    AreaPickerMulti
  },
  props: {
    record: {
      type: Object,
      default: () => {}
    },
    value: {
      type: [String, Number],
      default: 0
    }
  },
  methods: {
    onChange(val) {
      let res = "";
      if (this.record.options.multiple) {
        res = val.value.join(",");
      } else {
        res = val.value[val.value.length - 1];
      }
      this.$emit("input", res);
      this.$emit("change", res);
    }
  }
};
</script>
<style lang="scss"></style>
